<template>
	<div class="app-container">
		<el-form :model="queryParam" ref="queryForm" :inline="true">
			<el-form-item label="用户名：">
				<el-input v-model="queryParam.userName"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="submitForm">查询</el-button>
				<router-link :to="{path:'/user/student/edit'}" class="link-left">
					<el-button type="primary">添加</el-button>
				</router-link>
				
				
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="exportExcel" >导出</el-button>
			</el-form-item>
			
			
			
			<el-form-item>
				<el-upload
				  class="upload-demo"
				  action="http://localhost:8000/api/admin/user/import"
				  :on-preview="handlePreview"
				  :on-remove="handleRemove"
				  :before-remove="beforeRemove"
				  multiple
				  :limit="3"
				  :on-exceed="handleExceed"
				  :file-list="fileList">
				  <el-button  type="primary">导入</el-button>
				  
				</el-upload>
			</el-form-item>
		</el-form>

		<el-table v-loading="listLoading" :data="tableData" border fit highlight-current-row style="width: 100%">
			<el-table-column prop="id" label="Id" />
			<el-table-column prop="userName" label="用户名" />
			<el-table-column prop="realName" label="真实姓名" />
			<el-table-column prop="userLevel" label="学级" :formatter="levelFormatter" />
			<el-table-column prop="sex" label="性别" width="60px;" :formatter="sexFormatter" />
			<el-table-column prop="phone" label="手机号" />
			<el-table-column prop="createTime" label="创建时间" width="160px" />
			<el-table-column label="状态" prop="status" width="70px">
				<template slot-scope="{row}">
					<el-tag :type="statusTagFormatter(row.status)">
						{{ statusFormatter(row.status) }}
					</el-tag>
				</template>
			</el-table-column>
			<el-table-column width="270px" label="操作" align="center">
				<template slot-scope="{row}">
					<el-button size="mini" @click="changeStatus(row)" class="link-left">
						{{ statusBtnFormatter(row.status) }}
					</el-button>
					<router-link :to="{path:'/user/student/edit', query:{id:row.id}}" class="link-left">
						<el-button size="mini">编辑</el-button>
					</router-link>
					<router-link :to="{path:'/log/user/list', query:{userId:row.id}}" class="link-left">
						<el-button size="mini">日志</el-button>
					</router-link>
					<el-button size="mini" type="danger" @click="deleteUser(row)" class="link-left">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<pagination v-show="total>0" :total="total" :page.sync="queryParam.pageIndex" :limit.sync="queryParam.pageSize"
			@pagination="search" />
	</div>
</template>

<script>
	import {
		mapGetters,
		mapState
	} from 'vuex'
	import Pagination from '@/components/Pagination'
	import userApi from '@/api/user'

	export default {
		components: {
			Pagination
		},
		name: 'ExportButton',
		data() {
			return {
				queryParam: {
					userName: '',
					role: 1,
					pageIndex: 1,
					pageSize: 10
				},
				listLoading: true,
				tableData: [],
				total: 0
			}
		},
		created() {
			this.search()
		},
		methods: {
			handleRemove(file, fileList) {
				          console.log(file, fileList);
				        },
				        handlePreview(file) {
				          console.log(file);
				        },
				        handleExceed(files, fileList) {
				          this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
				        },
				        beforeRemove(file, fileList) {
				          return this.$confirm(`确定移除 ${ file.name }？`);
				        },
				  exportExcel() {
				  	 // 筛选当前页面展示的数据中 role 为 1 的数据
				  	      const exportData = this.tableData.filter(item => item.role === 1);
				  
				      // 发送HTTP请求到后端导出接口
				      fetch('/api/admin/user/export?roleId=1', {
				          method: 'POST',
				          headers: {
				              'Content-Type': 'application/json'
				          },
				          body: JSON.stringify(exportData) // 直接发送当前页面的数据给后端
				      })
				      .then(response => {
				          if (!response.ok) {
				              throw new Error('导出失败');
				          }
				          const contentType = response.headers.get('Content-Type');
				          if (contentType && contentType.includes('application/vnd.ms-excel')) {
				              return response.blob();
				          } else {
				              throw new Error('导出失败');
				          }
				      })
				      .then(blob => {
				          // 创建Blob URL
				          const url = window.URL.createObjectURL(blob);
				          // 创建a标签并设置下载链接
				          const a = document.createElement('a');
				          a.href = url;
				          a.download = 'users.xlsx'; // 设置下载文件名
				          // 添加a标签到文档中并触发下载
				          document.body.appendChild(a);
				          a.click();
				          // 释放Blob URL
				          window.URL.revokeObjectURL(url);
				      })
				      .catch(error => {
				          console.error('导出失败:', error);
				          this.$message.error('导出失败');
				      });
				  },
			exportExcel() {
				 // 筛选当前页面展示的数据中 role 为 1 的数据
				      const exportData = this.tableData.filter(item => item.role === 1);

			    // 发送HTTP请求到后端导出接口
			    fetch('/api/admin/user/export?roleId=1', {
			        method: 'POST',
			        headers: {
			            'Content-Type': 'application/json'
			        },
			        body: JSON.stringify(exportData) // 直接发送当前页面的数据给后端
			    })
			    .then(response => {
			        if (!response.ok) {
			            throw new Error('导出失败');
			        }
			        const contentType = response.headers.get('Content-Type');
			        if (contentType && contentType.includes('application/vnd.ms-excel')) {
			            return response.blob();
			        } else {
			            throw new Error('导出失败');
			        }
			    })
			    .then(blob => {
			        // 创建Blob URL
			        const url = window.URL.createObjectURL(blob);
			        // 创建a标签并设置下载链接
			        const a = document.createElement('a');
			        a.href = url;
			        a.download = 'users.xlsx'; // 设置下载文件名
			        // 添加a标签到文档中并触发下载
			        document.body.appendChild(a);
			        a.click();
			        // 释放Blob URL
			        window.URL.revokeObjectURL(url);
			    })
			    .catch(error => {
			        console.error('导出失败:', error);
			        this.$message.error('导出失败');
			    });
			},
			search() {
				this.listLoading = true
				userApi.getUserPageList(this.queryParam).then(data => {
					const re = data.response
					this.tableData = re.list
					this.total = re.total
					this.queryParam.pageIndex = re.pageNum
					this.listLoading = false
				})
			},
			changeStatus(row) {
				let _this = this
				userApi.changeStatus(row.id).then(re => {
					if (re.code === 1) {
						row.status = re.response
						_this.$message.success(re.message)
					} else {
						_this.$message.error(re.message)
					}
				})
			},
			deleteUser(row) {
				let _this = this
				userApi.deleteUser(row.id).then(re => {
					if (re.code === 1) {
						_this.search()
						_this.$message.success(re.message)
					} else {
						_this.$message.error(re.message)
					}
				})
			},
			submitForm() {
				this.queryParam.pageIndex = 1
				this.search()
			},
			levelFormatter(row, column, cellValue, index) {
				return this.enumFormat(this.levelEnum, cellValue)
			},
			sexFormatter(row, column, cellValue, index) {
				return this.enumFormat(this.sexEnum, cellValue)
			},
			statusFormatter(status) {
				return this.enumFormat(this.statusEnum, status)
			},
			statusTagFormatter(status) {
				return this.enumFormat(this.statusTag, status)
			},
			statusBtnFormatter(status) {
				return this.enumFormat(this.statusBtn, status)
			}
		},
		computed: {
			...mapGetters('enumItem', [
				'enumFormat'
			]),
			...mapState('enumItem', {
				sexEnum: state => state.user.sexEnum,
				statusEnum: state => state.user.statusEnum,
				statusTag: state => state.user.statusTag,
				statusBtn: state => state.user.statusBtn,
				levelEnum: state => state.user.levelEnum
			})
		}
	}
</script>